<!doctype html>
<%@ page contentType="text/html; charset=utf-8" %>
<%@ include file="/WEB-INF/views/include/taglib.jsp"%>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
    <title>步行路径规划</title>
    <link rel="stylesheet" href="https://cache.amap.com/lbs/static/main.css"/>
    <script type="text/javascript"
            src="https://webapi.amap.com/maps?v=1.3&key=1845a1f28f9a269503754d591582fcee"></script>
    <style type="text/css">
         #panel {
            position: fixed;
            background-color: white;
            max-height: 90%;
            overflow-y: auto;
            top: 10px;
            right: 10px;
            width: 280px;
        }
         #tip {
            background-color: #ddf;
            color: #333;
            border: 1px solid silver;
            box-shadow: 3px 4px 3px 0px silver;
            position: absolute;
            top: 10px;
            right: 10px;
            border-radius: 5px;
            overflow: hidden;
            line-height: 20px;
        }
        #tip input[type="text"] {
            height: 25px;
            border: 0;
            padding-left: 5px;
            width: 280px;
            border-radius: 3px;
            outline: none;
        }
        #riding{
            position: fixed;
            background-color: white;
            max-height: 85%;
            overflow-y: auto;
            top: 10px;
            right: 10px;
            width: 280px;
        }
       
    </style>
</head>
<body>
<div id="mapContainer"></div>
<div id="panel"></div>
<div id="riding"></div>
<div class="button-group" id="buttonGroup">
    <input type="button" class="button buttonEvent" value="点击去除事件" onClick="removeListener()"/>
    <input type="button" class="button buttonEvent" value="点击开始定位" onClick="addListener()"/>
    <input id="setFitView" class="button" type="button" value="地图自适应显示"/>
    <input id="get_riding" class="button buttonEvent" type="button" value="骑行路线" onclick="addRiding(true)"/>
</div>
<script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script type="text/javascript">

    //基本地图加载
    var map = new AMap.Map("mapContainer", {
        resizeEnable: true,
        zoom: 13 //地图显示的缩放级别
    });
    
   	//隐藏button
    $(".buttonEvent").hide();
   	
    //循环添加marker
     var dl= eval('${storeAreaList}');
     var infoWindow = new AMap.InfoWindow({offset:new AMap.Pixel(0,-30)});
     for(var i=0;i<dl.length;i++){
    	var markers = new AMap.Marker({
            map: map,
            position: [dl[i]["longitude"],dl[i]["dimension"]],
        });
    
    	  markers.content=dl[i]["remarks"];
          markers.on('click',markerClick);
          markers.emit('click',{target:markers});
    }
     
     function markerClick(e){
         infoWindow.setContent(e.target.content);
         infoWindow.open(map, e.target.getPosition());
     }
     
     //判断是不是只有一个标记点
     if(dl.length <= 1){
    	 $(".buttonEvent").show();
    	 //添加点击定位事件
    	    function addListener(){
    	    	 map.on('click', callBackFn);
    	    }
    	    
    	    //移除地图的click事件的监听
    	    function removeListener() {
    	        map.off('click', callBackFn);
    	    }
     }else{
    	 $(".buttonEvent").hide();
     }
     
    
    var marker;
    //事件回调函数
    var callBackFn = function(e) {
    	 $.post("${ctx}/store/storeTree/addStoreArea",{lng:e.lnglat.getLng(),lat:e.lnglat.getLat(),storeId:'${storeId}'},function(data){
         	if(data["info"] == "success"){
         		alert("添加成功");
         	}
         },"json"); 
    	if(marker != null){
    		map.remove(marker);
    	}
    	marker = new AMap.Marker({
            map: map,
            position: [e.lnglat.getLng(),e.lnglat.getLat()],
        });
    };

    // 添加事件监听, 使地图自适应显示到合适的范围
    AMap.event.addDomListener(document.getElementById('setFitView'), 'click', function() {
        var newCenter = map.setFitView();
        document.getElementById('centerCoord').innerHTML = '当前中心点坐标：' + newCenter.getCenter();
    });
    
    $().ready(function(){
    	addRiding(false);
    });
    
    //是否添加骑车路径
    function addRiding(flage){
    //加插件定位
    AMap.plugin(['AMap.Geolocation','AMap.Riding'],
    	    function(){
	    	    geolocation = new AMap.Geolocation({
	               timeout: 10000,          //超过10秒后停止定位，默认：无穷大
	               zoomToAccuracy: true,      //定位成功后调整地图视野范围使定位位置及精度范围视野内可见，默认：false
	            });
    	        map.addControl(geolocation,true);
    	      
        	     //当有且只有一个店时，添加骑行行车路线
      	    	
      	    	 if(dl.length == 1 && flage){
      	        	    geolocation.getCurrentPosition();
      	       	        AMap.event.addListener(geolocation, 'complete', onComplete);//返回定位信息
      	       	        AMap.event.addListener(geolocation, 'error', onError);      //返回定位出错信息
      	        	    }
    	}); 
    }
    //解析定位结果
    function onComplete(data) {
      //骑行路线规划
	    var riding= new AMap.Riding({
	        map: map,
	        panel:"riding"
	    }); 
	    riding.search([data.position.getLng(), data.position.getLat()],[dl[0]["longitude"],dl[0]["dimension"]], function(status, result) {
	   });
    }
    //解析定位错误信息
    function onError(data) {
       alert("定位失败");
    }
    
    //公交线路
  /*   AMap.service(["AMap.Transfer"], function() {
        var transOptions = {
            map: map,
            city: '厦门',
            panel:'panel',                            //公交城市
            //cityd:'乌鲁木齐',
            policy: AMap.TransferPolicy.LEAST_TIME //乘车策略
        };
        //构造公交换乘类
        var trans = new AMap.Transfer(transOptions);
        //根据起、终点坐标查询公交换乘路线
        trans.search([{keyword:'蔡塘广场'},{keyword:'湖里区'}], function(status, result){
        });
    }); */
</script>
  <script type="text/javascript" src="https://webapi.amap.com/demos/js/liteToolbar.js"></script>
</body>
</html>